<template>
	<el-dialog width="500px" :show-close="false" v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
		<div class="cc-flex flex-h-center">
			<div style="width: 500px">
				<el-form label-position="top" ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px" @keyup.enter="submitHandle()">
					<el-form-item prop="name" label="姓名">
						<el-input v-model="dataForm.name"></el-input>
					</el-form-item>
					<el-form-item label="年龄">
						<el-input v-model="dataForm.age"></el-input>
					</el-form-item>
					<el-form-item prop="type" label="类型">
						<el-radio
							v-for="(type, index) in EDemoTypeList.filter(f => f.value != EDemoType.all)"
							:key="index"
							v-model="dataForm.type"
							:label="type.value"
							size="large"
							>{{ type.name }}</el-radio
						>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { MDemo, EDemoType, EDemoTypeList } from '@/modules/demo'
import type { FormInstance, FormRules } from 'element-plus'

const emit = defineEmits<{
	(e: 'refreshDataList', value: string | undefined): void
}>()

const visible = ref(false)
const dataFormRef = ref<FormInstance>()
const dataForm: MDemo = reactive({
	id: '',
	name: '',
	age: 0,
	type: EDemoType.all
})

const dataRules = reactive<FormRules>({
	name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
	type: [{ required: true, message: '选择类型', trigger: ['blur', 'change'] }]
})

async function init(data?: MDemo) {
	visible.value = true
	// 重置表单数据
	await dataFormRef.value?.resetFields()
	if (data) Object.assign(dataForm, data)
}

// 表单提交
function submitHandle() {
	dataFormRef.value?.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		// useDictDataSubmitApi(dataForm).then(() => {
		// 	ElMessage.success({
		// 		message: '操作成功',
		// 		duration: 1000,
		// 		onClose: () => {
		// 			visible.value = false
		// 			emit('refreshDataList')
		// 		}
		// 	})
		// })
	})
}

defineExpose({
	init
})
</script>
<style scope lang="scss">
</style>
